<!--  咨询师  -->
<template>
  <div class="consult">
    <Header />
    <div class="about">
      <h3>咨询师列表</h3>
      <!-- 搜索 -->
      <div class="consult_class">
        <input
          type="text"
          name=""
          id=""
          v-model="value"
          placeholder="  请输入咨询师类型/姓名搜索"
        />
        <van-icon @click="grabble" name="search" size="16px" />
      </div>
      <!-- 咨询师分类 -->
      <div class="consult_menu">
        <div class="consult_box">
          <div
            class="consult_left"
            v-for="(item, index) in getGroup"
            :key="index"
          >
            {{ item.class }}
          </div>
        </div>
        <div class="consult_right">
          <div class="consult_item_one">
            <div
              class="ffff"
              v-for="(item1, index1) in constult1"
              :key="index1"
              @click="activeColor(item1.id)"
              :class="activeId == item1.id ? 'active11' : ''"
            >
              {{ item1.class }}
            </div>
          </div>
          <div class="consult_item_one">
            <div
              class="ffff"
              v-for="(item2, index2) in constult2"
              :key="index2"
              @click="activeColor(item2.id)"
              :class="activeId == item2.id ? 'active11' : ''"
            >
              {{ item2.class }}
            </div>
          </div>
          <div class="consult_item_one">
            <div
              class="ffff"
              v-for="(item3, index3) in constult3"
              :key="index3"
              @click="activeColor(item3.id)"
              :class="activeId == item3.id ? 'active11' : ''"
            >
              {{ item3.class }}
            </div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="consult_bottom_box">
        <div
          class="consult_bottom_item"
          v-for="(item, index) in constultList"
          :key="index"
          @click="constultDe(item.id)"
        >
          <div class="bottom_item_top">
            <img src="../assets/image/rencai.png" alt="" />
          </div>
          <div class="bottom_middle">
            <div class="bottom_middle_title">{{ item.group_one }}</div>
            <div class="bottom_middle_title2">{{ item.group_two }}</div>
          </div>
          <div class="bottom_bottom">
            <div>{{ item.name }}</div>
            <div v-if="item.sexdata == 1">男</div>
            <div v-else>女</div>
          </div>
          <div class="bottom_end">￥{{ item.price }}起</div>
        </div>
      </div>
    </div>
    <div class="paging">
      <van-pagination
        v-model="currentPage"
        :page-count="pageCount"
        @change="change1(currentPage)"
      />
    </div>
  </div>
</template>

<script>
import { getConsgroup, getLists } from "../api/index/index";
import pagin from "../components/pagin.vue";
export default {
  data() {
    return {
      pageCount: 1,
      currentPage: 1,
      activeId: "",
      //咨询师分类数据
      getGroup: [],
      // 存放id的数组
      getGroupId: [],
      // 每一项数据的数组
      getGroupItem: [],
      //每一项全部数据
      allItem: [],
      constult1: [],
      constult2: [],
      constult3: [],
      constultList: [],
      value: "",
      currentPage: 1,
      attr_id: "",
      show: true,
      showList: true,
      shower: true,
      list: {
        consultant: {
          data: {},
        },
      },
      newList: [],
      //数据
      paging: {
        total: 0,
        current_page: 1,
        totalPage: 0,
        list: [],
      },
    };
  },
  mounted() {
    let vm = this;
    vm.getList();
  },
  methods: {
    //切换颜色
    activeColor(id) {
      let vm = this;
      vm.activeId = id;
    },
    //跳转咨询师详情
    constultDe(id) {
      this.$router.push("/consultantList?id=" + id);
    },
    setPage(page) {
      let vm = this;
      this.currentPage = page;

      vm.getList(this.attr_id); //未搜索
    },
    clickId(itemChild) {
      let vm = this;
      let arr = vm.list.consultant.data;
      let newsd = [];
      vm.getList(itemChild.id); //搜索
      arr.forEach((item) => {
        if (item.cons_attrb_id == itemChild.cons_attr_name) {
          newsd.push(item);
        }
      });
      this.showList = false;
      this.shower = false;
      this.newList = newsd;
      this.attr_id = itemChild.id;
    },
    // 搜索功能
    grabble() {
      let vm = this;
      // let params;
      let value = vm.value; //获取输入框里面的内容
      vm.getLists1({ name: value });
    },
    tolist(item) {
      this.$router.push("/consultant_list?id=" + item.id);
      console.log(item.id);
    },
    getList(id = "") {
      let vm = this;
      let params = {
        page: this.currentPage,
        group_id: id,
      };
      //请求列表数据
      vm.getLists1(params);
      // 咨询师分类数据
      vm.getConsgroup1(1);
      vm.getConsgroup1(2);
      vm.getConsgroup1(3);
    },
    // 咨询师列表数据
    async getLists1(data) {
      let vm = this;
      const res = await getLists(data);
      console.log(res, "咨询师列表数据");
      //总页数
      vm.pageCount = Math.ceil(res.data.data.total / 6);
      vm.constultList = res.data.data.data;
      console.log(vm.constultList, "咨询师循环数据");
    },
    // 分页页码发生变化回调
    change1(index) {
      var vm = this;
      console.log(index);
      // 传递页码数
      vm.getLists1({ page: index });
    },
    // 咨询师分类数据
    async getConsgroup1(data) {
      let vm = this;
      const res = await getConsgroup(data);
      console.log(res, "咨询师分类");
      vm.getGroup = res.data.data;
      //循环分类id 循环发请求 循环存放id的数组 getConsgroupId
      vm.getGroup.forEach((v) => {
        vm.getGroupId.push({ id: v.id });
      });
      vm.getConsgroup2();
      vm.getConsgroup3();
      vm.getConsgroup4();
    },
    // 咨询师分类数据
    async getConsgroup2() {
      let vm = this;
      const res = await getConsgroup({ id: 1 });
      console.log(res, "咨询师分类1");
      vm.constult1 = res.data.data;
    },
    async getConsgroup3() {
      let vm = this;
      const res = await getConsgroup({ id: 2 });
      vm.constult2 = res.data.data;
      console.log(vm.constult2, "constult2");
    },
    async getConsgroup4() {
      let vm = this;
      const res = await getConsgroup({ id: 3 });
      vm.constult3 = res.data.data;
      console.log(vm.constult3, "constult3");
    },
  },
  components: {
    pagin,
  },
};
</script>

<style lang="less" scoped>
// 咨询师分类
@import url("../assets/css/consult.css");
// 按钮样式
.paging {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: cnter;
  margin-bottom: 40px;
}
/deep/.van-pagination__item--active {
  background-color: #c4181f !important;
}
/deep/.van-pagination__item {
  box-sizing: border-box;
  width: 50px;
  min-width: 36px;
  height: 40px;
  // color: #c4181f;
  background-color: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.active11 {
  color: red !important;
}
.consult {
  .about {
    h3 {
      font-size: 18px;
      line-height: 27px;
      color: #c4181f;
      margin-left: 121px;
      margin-top: 27px;
    }
    .consult_class {
      width: 341px;
      margin-left: 16px;
      margin-top: 19px;
      border-top: 1px solid #dcdcdc;
      input {
        width: 240px;
        height: 32px;
        margin-top: 32px;
        margin-left: 65px;
        background-color: #f0f0f0;
        border: none;
        border-radius: 8px;
      }
      .van-icon-search {
        display: inline;
        border: 1px dotted #dcdcdc;
        position: relative;
        top: 5px;
        left: -33px;
      }
      .consult_class_item {
        width: 341px;
        margin-left: 16px;
        margin-top: 20px;
        .consult_class_item_name {
          display: flex;
          flex-wrap: wrap;
          .consult_class_item_name_left {
            width: 80px;
            span {
              font-size: 14px;
              line-height: 27px;
            }
          }
          .consult_class_item_name_right {
            width: 250px;
            text-align: left;
            display: flex;
            flex-wrap: wrap;
            .consult_class_item_name_right_name {
              width: 83px;
              :hover {
                color: #c4181f;
              }
              span {
                font-size: 14px;
                line-height: 27px;

                color: #d0d0d0;
              }
            }
            .active {
              width: 34%;
            }
          }
        }
      }
    }
    .consult_list,
    .new_list {
      width: 341px;
      margin-left: 16px;
      margin-top: 25px;
      border-top: 1px solid #dcdcdc;
      display: flex;
      justify-content: flex-start;
      align-content: center;
      flex-wrap: wrap;
      .new_list_404 {
        height: 100px;
        text-align: center;
      }
      .consult_list_item {
        width: 77px;
        margin: 32px 18px 0 18px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        .consult_list_item_img {
          img {
            width: 78px;
            height: 117px;
          }
        }
        .consult_list_item_class {
          text-align: center;
          width: 100%;
          .consult_list_item_classa {
            width: 100%;
            .van-tag--danger {
              margin-top: 8px;
              color: #dcdcdc;
            }
          }

          .van-tag--default {
            margin-top: 5px;
          }
        }

        .name {
          margin-top: 5px;
        }
        .money {
          text-align: center;
          span {
            margin-top: 3px;
            color: #df020b;
            font-size: 14px;
            font-weight: 400;
            line-height: 28px;
          }
        }
      }
    }
  }
}
</style>